// router component
import {
    BrowserRouter, Routes, Route, Navigate
} from 'react-router-dom';
import HeaderContainerLayout from '@layouts/header-container-layout/header-container-layout';
import Home from '@pages/home/home';
import DemoPage from '@pages/demo-page/demo-page';
import Demo1 from '@pages/demo1';
import Demo2 from '@pages/demo2';
import Demo3 from '@pages/demo3';
import Demo4 from '@pages/demo4';
import Demo5 from '@pages/demo5';
import Snake from '@pages/snake';
import AnimationPage from '@pages/animation-demo/animation-demo';
import Template from '@pages/template';
import FadeIn from '@pages/fade-in';
import Louver from '@pages/louver';
import Demo6 from '@pages/demo6';
import ImageBg from '@pages/image-bg';
import Magnify from '@pages/magnify';
import TwoBall from '@pages/two-ball';
import { VITE_NODE } from '@config/index';

const RouterRoot = () => {
    return (
        // react-router-dom v6 123
        // https://reactrouter.com/docs/en/v6/getting-started/overview
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<HeaderContainerLayout />}>
                    <Route
                        index
                        element={<Navigate to="home" replace />}
                    />
                    <Route path="home" element={<Home />} />
                    <Route path="demo1" element={<Demo1 />} />
                    <Route path="snake" element={<Snake />} />
                    <Route path="demo2" element={<Demo2 />} />
                    <Route path="demo3" element={<Demo3 />} />
                    <Route path="demo4" element={<Demo4 />} />
                    <Route path="demo5" element={<Demo5 />} />
                    <Route path="animation" element={<AnimationPage />} />
                    <Route path="template" element={<Template />} />
                    <Route path="fade-in" element={<FadeIn />} />
                    <Route path="louver" element={<Louver />} />
                    <Route path="demo6" element={<Demo6 />} />
                    <Route path="magnify" element={<Magnify />} />
                    <Route path="image-bg" element={<ImageBg />} />
                    <Route path="two-ball" element={<TwoBall />} />
                    {
                        VITE_NODE === 'development'
                            && (
                                <Route path="demo" element={<DemoPage />} />
                            )
                    }
                </Route>
                <Route
                    path="*"
                    element={(
                        <main>
                            <p>There is nothing here!</p>
                        </main>
                    )}
                />
            </Routes>
        </BrowserRouter>
    );
};

export default RouterRoot;
